<template>
  <div>
    <p> {{ count }} </p>
    <!-- <p>{{ obj.name }}</p> -->
     <p>{{  name  }}</p>
     <p>{{  age  }}</p>
     <p v-for="(item, index) in arr" :key="index">
      {{ item }}
     </p>
    <button @click="add">按钮</button>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue'

const count = ref(0)

// 直接setup中定义的数据不会有响应式
// 1. 基础数据类型 / 引用数据类型 使用 ref 定义 通过 .value 访问 / 修改  在视图中访问不需要加.value
// 2. 对象类型 使用 reactive 定义   不能修改引用地址否则回丢失响应式 明确属性值修改
// 建议 ref

let { name, age } = reactive({
  name: 'zs',
  age: 18
})
// const add = () => {
//   obj.name = 'ls'
//   console.log(obj);
// }
// [1,2,3] 返回的数据
// 可能回去接受服务端返回的数据
// let arr = reactive([])

const arr = ref([])
const add = () => {
  // count.value++
  // name = 'ls'
  // age++
  // arr.push(...[1,2,3])
  arr.value = [1,2,3]
  console.log(arr);
}
</script>
<style scoped>

</style>
